<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
		}
		#mycanvas {
			margin-top: 50px;
		}
		#mycanvas canvas, #mycanvas div{
			
			background-color:#fff;
			margin:0 auto;		
		}
		/*div.jm-tooltip {
			background-color: rgba(255,255,255,0.8);
			padding:4px;
			border:1px solid #000;
			box-shadow: 0 0 3px #000;
			border-radius: 6px;
		}*/
		</style>
		<script type="module">
			
			import { jmChart } from '../dist/jmchart.esm.js';

			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.8, 600);
				var h = Math.max((window.innerHeight || window.document.body.clientHeight) * 0.4, 400);			
				inichart(w, h);
			})();
			

			function inichart(w, h) {
					var chart1 = new jmChart('mycanvas', {
						width: w,
						height: h,
						enableAnimate: true,
						//autoRefresh: false,
						yLabelFormat: function() {
							return this.field;
						},
                        style: {
							markLine: false, // 不展示标线
                            chartArea: {
                                stroke: 'transparent'
                            },
							axis: {
								stroke: '#ccc',
								// 指定栅格条数
								xLabel: {
									count: 3
								}
							},
							grid: {
								x: true, // 是否显示网格
								stroke: '#eaeaf1',
								lineType: 'dotted', // 虚线，不填为实线
								dashLength: 6, //虚线条间隔，默认5
								lineWidth: 1,
								zIndex: 0
							},
							margin: {
								left: 10,
								top: 10,
								right: 80,
								bottom: 10
							}
                        }
                    });
					
					var radar = chart1.createSeries('radar', {
						fields: ['y1' , 'y2', 'y3', 'y4', 'y5', 'y6'],
						legendFormat: function(options) {
							return options.data.x;
						},
						onOver: function(e) {
							console.log(this.option.data)
							e.cancel = true;
							return false;
						},
						itemLabelFormat: function(point) {
							return point.yValue.toFixed(2);
						},
						style: {
							// 指定颜色获取方式，不指定就会使用默认的
							color: function(option) {	
								if(!option || !option.data) return;							
								const color = option.data.color || this.graph.getColor(option.index);								
								return color;
							},
							fill: function(style) {
								if(!style) return '';
								const color = this.graph.utils.hexToRGBA(style.stroke);
                				return `rgba(${color.r},${color.g},${color.b}, 0.2)`;
							},
							label: {
								show: true, // 默认就是true, 如果不想显示标签，设为false
								stroke: '#ccc',
								fill: 'green',
								textAlign: 'center',
								textBaseline: 'middle',
								zIndex: -1,
								border: 0
							}
						}
					});
					
                    
					const datacount = 4;
					let data = [						
					];	

					function refreshData() {

						data = [];
						for(let i=0; i<datacount; i++) {                           
                           
							data.push({
                                x: 'test' + i,
                                y1: 10 * i + Math.random() * 10,
                                y2: 10 * i + Math.random() * 50,
                                y3: 10 * i + Math.random() * 100,
                                y4: 10 * i + Math.random() * 120,
                                y5: 10 * i + Math.random() * 120,
                                y6: 10 * i + Math.random() * 120
                            });
						}

						chart1.data = data;
						chart1.refresh(); 
						
					}

					
					refreshData();

					chart1.utils.bindEvent(document.getElementById('btnRedraw'),'click', refreshData);
					
					// // 自动刷新代码
					// function update() {
					// 	if(chart1.needUpdate) chart1.redraw();
					// 	requestAnimationFrame(update);
					// }
					// requestAnimationFrame(update);
				}
		</script>
	</head>
	<body>
		<div id="mycanvas">
			</div>
			<button id="btnRedraw">重绘</button>		
	</body>
</html>